<!-- 导航栏 -->
<template>
	<!-- <view :style="[navbarStyle]"> -->
		<view class="container" :style="[navbarStyle, {'background-color': backgroundColor}]">
			<view class="content">
				<text class="title">店铺中心</text>
			</view>
		</view>
	<!-- </view> -->
</template>

<script setup>
	import { computed } from 'vue';

	const props = defineProps({
		scrollTop: 0, // 滚动条距离顶部高度
	});
	
	// 背景色
	const backgroundColor = computed(() => {
		const alpha = (props.scrollTop - 5) / 50;
		return `rgba(252,226,225, ${alpha})`;
	});

	// 导航栏高度
	const navbarStyle = function() {
		const statusBarHeight = getApp().globalData.statusBarHeight;
		const navBarHeight = getApp().globalData.navBarHeight;
		return { 'padding-top': statusBarHeight + 'px', 'height': navBarHeight + 'px' };
	}();
</script>

<style lang="scss" scoped>
	.container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		// background-color: #FE505D;

		.content {
			display: flex;
			align-items: center;
			justify-content: center;
			height: inherit;

			.title {
				font-weight: bold;
				font-size: 36rpx;
				color: #222222;
			}
		}
	}
</style>